import { Suspense, lazy } from 'react'
// 定义路由表
const Home = lazy(() => import('../pages/Home'))
const About = lazy(() => import('../pages/About'))
const News = lazy(() => import('../pages/News'))
const Message = lazy(() => import('../pages/Message'))
const Detail = lazy(() => import('../pages/Detail'))

// 定义函数,用于给每一个懒加载的路由组件包裹Suspense
function load(Son) {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Son></Son>
    </Suspense>
  )
}
export default [
  {
    path: 'home',
    element: load(Home),
    children: [
      {
        path: 'news',
        element: load(News),
      },
      {
        path: 'message',
        element: load(Message),
        children: [
          {
            path: 'detail/:id',
            element: load(Detail),
          },
        ],
      },
    ],
  },
  {
    path: 'about',
    element: load(About),
  },
]
